<template>
    <div>
        <data-table
            title="Roles"
            :fetch-method="store.permission.getRoles"
            :headers="[
                { text: 'Full Name', value: 'name' },
            ]"
            feature-name="role"

            @create="createItem"
            @update="updateItem"
            @delete="deleteItem"
        />
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import DataTable from '@/components/DataTable.vue';
import { User } from '@/type/Auth';
import store from '@/store/Index';
import { sendEvent } from '@/misc/EventBus';

export default Vue.extend({
    name: 'RoleList',
    components: {
        DataTable,
    },
    data() {
        return {
            store,
        };
    },
    methods: {
        createItem() {
            this.$router.push('/roles/create');
        },
        updateItem(user: User) {
            this.$router.push(`/roles/${user.id}`);
        },
        async deleteItem(user: User) {
            const confirm = await store.dialog.showConfirm('Are you sure to delete this role?');
            if (confirm) {
                store.loader.run(async () => {
                    await store.permission.deleteRole(user.id as number);

                    await sendEvent('update-data-table');
                    store.alert.show('The role has been deleted successfully');
                });
            }
        },
    },
});
</script>
